<template>
    <div class="add-menu">
        <header>
            <p>新建清单</p>
            <span @click="comfirm">完成</span>
        </header>
        <div class="menu-content">
            <label for="text">清单名</label>
            <input type="text" id="text" v-model="val" placeholder="请输入清单名" required>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            val: ''
        }
    },
    methods: {
        comfirm() {
            if (!this.val) return ;
            console.log()
            this.$emit('comfirm', this.val);
        }
    }
}
</script>

<style lang="sass">
.add-menu
    width: 100%
    box-sizing: border-box
    background: #fff
    padding: 30px 20px
    height: 80vh
    position: fixed
    bottom: 0
    left: 0
    header
        display: flex
        justify-content: space-between
        align-items: center
        p
            font-size: 26px
        span
            color: orange
    .menu-content
        text-align: left
        display: flex
        align-items: center
        margin-top: 30px
        label
            width: 110px
            line-height: 40px
            height: 40px
            font-size: 18px
        input
            border: none
                bottom: 1px solid #999
            outline: 0
            color: #333
            height: 40px
            font-size: 20px
            width: 200px
            background: #fff

</style>